@mixin setTopLine($c: $tl-border-1px-color) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid $c;
    color: $c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

@mixin setBottomLine($c: $tl-border-1px-color) {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid $c;
    color: $c;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}

@mixin setLeftLine($c: $tl-border-1px-color) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid $c;
    color: $c;
    transform-origin: 0 0;
    transform: scaleX(0.5);
}

@mixin setRightLine($c: $tl-border-1px-color) {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid $c;
    color: $c;
    transform-origin: 100% 0;
    transform: scaleX(0.5);
}

@mixin setLine($c: $tl-border-1px-color) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border: 1px solid $c;
    color: $c;
    height: 200%;
    transform-origin: left top;
    transform: scale(0.5);
    border-radius: inherit;
}

.azm-1px, .azm-1px-t, .azm-1px-b, .azm-1px-tb, .azm-1px-l, .azm-1px-r {
    position: relative;
}

.azm-1px:before {
    @include setLine();
}

.azm-1px-t:before {
    @include setTopLine();
}

.azm-1px-b:after {
    @include setBottomLine();
}

.azm-1px-tb {
    &:before {
        @include setTopLine();
    }

    &:after {
        @include setBottomLine();
    }
}

.azm-1px-l:before {
    @include setLeftLine();
}

.azm-1px-r:after {
    @include setRightLine();
}


/**************************清除浮动******************************/
.azm-clearfix:after {
    content: "";
    display: table;
    clear: both
}

/*************************hairline******************************/
.azm-hairline,
.azm-hairline--bottom,
.azm-hairline--left,
.azm-hairline--right,
.azm-hairline--surround,
.azm-hairline--top,
.azm-hairline--top-bottom {
    position: relative
}

.azm-hairline--bottom:after,
.azm-hairline--left:after,
.azm-hairline--right:after,
.azm-hairline--surround:after,
.azm-hairline--top-bottom:after,
.azm-hairline--top:after,
.azm-hairline:after {
    content: " ";
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-transform-origin: center;
    transform-origin: center;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    border: 0 solid $tl-border-1px-color;
}

.azm-hairline--top:after {
    border-top-width: 1px
}

.azm-hairline--left:after {
    border-left-width: 1px
}

.azm-hairline--right:after {
    border-right-width: 1px
}

.azm-hairline--bottom:after {
    border-bottom-width: 1px
}

.azm-hairline--top-bottom:after {
    border-width: 1px 0
}

.azm-hairline--surround:after {
    border-width: 1px
}
